<template>
    <div class="app-container">
    <!-- 激活store计算-->

    <div class="search-panel">
      <form class="form-horizontal form-label-left" data-parsley-validate="" id="demo-form2" novalidate="">
        <el-row>
          <vue-module v-for="(item,index) in search.field" :key="'key_search_'+index" v-bind:todo="item"
                      v-bind:ui="item.ui" v-bind:index="index"></vue-module>
          <el-col :span="24" class="search-panel-btn">
            <el-button type="primary" size="medium" icon="el-icon-search" @click="searchData()">查询</el-button>
            <el-button type="primary" size="medium" icon="el-icon-plus" @click="insert.methods.insertData()">新增</el-button>
            <!-- <el-button type="primary" size="medium" icon="el-icon-upload" @click="importCar.isShow=true">导入有效车牌库</el-button> -->
          </el-col>
        </el-row>
      </form>
    </div>

    <div class="x_panel">
      <div class="x_content">
        <data-table :data="result.reTableDatas" v-loading="search.loading" :pagination="search.pagination"
                    :change="onTableChange">
          <column type="index" width="50"></column>
          <column v-for="(item,index) in result.field" :key="index" :label="item.label" :field="index"
                  :visible="item.visible"></column>

          <column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit" title="编辑"
                         @click="insert.methods.editData(scope.row)"></el-button>
              <pop-confirm content="是否删除本条记录" icon="question-circle-o"
                           :on-ok="del.methods.ok" :on-cancel="cancel">
                <el-button type="danger" size="mini" icon="el-icon-delete" title="删除"
                           @click.stop="del.methods.setRow(scope.row)"></el-button>
              </pop-confirm>
            </template>
          </column>

        </data-table>

      </div>
    </div>

    <el-dialog :title="insert.title" :visible.sync="insert.isShow"
               :before-close="insert.methods.insertCancel" width="40%">
      <vue-module v-for="(item,index) in insert.field" :key="'key_insert_'+index" v-bind:todo="item" v-bind:ui="item.ui"
                  v-bind:index="index"></vue-module>
      <span slot="footer" class="dialog-footer">
             <el-button @click="insert.methods.insertCancel">取 消</el-button>
             <el-button type="primary" @click="insert.methods.insertOk" :loading="insert.isLoading">确 定</el-button>
            </span>
    </el-dialog>

    <el-dialog :title="importCar.title" :visible.sync="importCar.isShow" class="carpolice"
               :before-close="importCar.methods.insertCancel" width="40%">
      <label class="col-lg-3 col-md-3 mid">文件：</label>
      <input id="file" style="border: 1px solid #ddd;border-radius: 4px;padding: 5px;" type="file"
             placeholder="请选择文件"/>
      <span slot="footer" class="dialog-footer">
             <el-button @click="importCar.methods.insertCancel">取 消</el-button>
             <el-button type="primary" @click="importCar.methods.importCarOK" :loading="importCar.isLoading">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import creatUi from '../../assets/js/initVueData'

  const vueUi = new creatUi();
  import {mapState} from 'vuex';

  export default {
    data() {
      const vm = this;
      return {
        initType: "static", // 前端框架初始类型
        easyflowName: "Illegal_manage",//easyflow 名称
        importCar: {
          isShow: false,
          title: "导入有效车牌库",
          isLoading: false,
          propData: "",
          id: '',
          modalType: "add", // 当前新增模板处于编辑或者新增状态 "edit" or "add"
          methods: {
            importCarOK: function () {
              var $file = $('#file');
              var file = $file[0];
              var form = new FormData();
              form.append("action", "importcar");
              form.append("uploadfile", file.files[0]);
              $.ajax({
                url: "../../importExcel",
                type: "post",
                data: form,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                  vm.insert.isShow = false;
                  if (data == 'success') {
                    vm.$notify.success({content: '导入成功'})
                  } else {
                    vm.$notify.danger({content: data});
                  }
                  file.value = '';
                  file.outerHTML = file.outerHTML;
                }
              });
            },
            insertCancel: function () {
              // 关闭窗口时重置面板
              vueUi.easyflowCancel({
                easyflow: vm.importCar,
              });
              vm.importCar.isShow = false;
            },
          }
        },
        insert: {
          isShow: false,
          title: "新增黑名单",
          isLoading: false,
          propData: "",
          id: '',
          row: "",
          modalType: "add", // 当前新增模板处于编辑或者新增状态 "edit" or "add"
          field: {
            hpzl: {
              name: "hpzl",
              label: "车牌类型",
              ui: 'listbox',
              visible: true,
              required: true,
              options: vm.$store.getters['enums/list']('hpzl')
            },
            hphm: {
              name: "hphm",
              label: "车牌号码",
              ui: "textbox",
              visible: true,
              required: true,
            },
            surveillancetype: {
              name: "surveillancetype",
              label: "缉查类型",
              ui: "textbox",
              visible: true,
              required: true,
            }
          },
          methods: {
            insertData: function () {

              //console.log(self.insert);
              vm.insert.modalType = "add";
              vm.insert.title = "新增黑名单";
              vm.insert.isShow = !vm.insert.isShow;
            },
            editData: function (row) {

              vm.insert.row = row;
              vm.insert.isShow = true;
              vueUi.easyflowEditInit({
                easyflow: vm.insert,
                row: row
              });

              vm.insert.id = row.id;
              vm.insert.modalType = "edit";
              vm.insert.title = "编辑黑名单";
            },
            insertOk: function () {
              const self = this;
              //console.log(self.insert)
              // 发起请求
              if (vm.insert.modalType == "add") {
                vueUi.easyflowOk.call(vm, {
                  easyflow: 'insert',
                  url: "illegal/add.htm",
                  before: function (parms) {
                    parms.type = 0
                  },
                  after: function (data, postParms) {
                    vm.insert.loading = false;
                    if (data === "success") {
                      vm.$notify.success({content: '新增成功！'});
                    }
                  }
                });
              } else {
                vueUi.easyflowOk.call(vm, {
                  easyflow: 'insert',
                  url: "illegal/update.htm",
                  before: function (postParms) {

                    for (var i = 0; i < vm.$store.getters['enums/list']('hpzl').length; i++) {
                      if (postParms.hpzl == vm.$store.getters['enums/list']('hpzl')[i].label) {
                        postParms.hpzl = vm.$store.getters['enums/list']('hpzl')[i].value
                      }
                    }
                    postParms.id = vm.insert.id;
                    postParms.type = vm.insert.row.type
                  },
                  after: function (data, postParms) {
                    if (data === "success") {
                      vm.$notify.success({content: '编辑成功！'});
                    }
                  }
                });
              }
            },
            insertCancel: function () {
              // 关闭窗口时重置面板
              vueUi.easyflowCancel({
                easyflow: vm.insert,
              });
              vm.insert.isShow = false;
            },
          }
        },
        search: {
          column: 3,
          url: "/sspquery/query",
          before: function (data) {
            data.pageSize = Number(data.pageSize)
            data.name = "Illegal_manage";
          },
          after: function (data) {
            console.log('data', data)
            for (let i in data.data.list) {
              data.data.list[i].hpzl = data.data.list[i].hpzl;
              data.data.list[i].orgName = data.data.list[i].orgName;
              data.data.list[i].hpzlStr = vm.$store.getters['enums/item']('hpzl', 'value', data.data.list[i].hpzl).label;
            }
          },
          field: {
            provId: {
              label: "省份",
              ui: 'listbox',
              options: vm.$store.getters['enums/list']('hpzl')
            },
            cityId: {
              label: "城市",
              ui: 'listbox',
              options: vm.$store.getters['enums/list']('hpzl')
            },
            blockId: {
              label: "区域",
              ui: 'listbox',
              options: vm.$store.getters['enums/list']('hpzl')
            },
            imei: {
              label: "设备编号",
              ui: "textbox",
            },
            zfHphm: {
              label: "执法车牌号",
              ui: "textbox",
            },
            gtStartDate: {
              label: "采集时间",
              init: true,
              ui: "datetimeboxgroup",
              defaultDate1: fx.date(),
              defaultDate2: fx.date("", 1),
              type: "string",
              enter_value: fx.date() + "&" + fx.date("", 1),
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              uiType: "datetimerange",
            },
            surveillancetype1: {
              label: "上传状态",
              ui: "listbox",
              options: vm.$store.getters['enums/list']('upStatus')
            },
            surveillancetype2: {
              label: "审核状态",
              ui: "listbox",
              options: vm.$store.getters['enums/list']('WfShStatus')
            },
            wfType: {
              label: "违法类型",
              ui: "textbox",
              options: vm.$store.getters['enums/list']('hpzl')
            },
          },
        },
        result: {
          field: {
            gtTimeStr: {
              label: "采集时间",
            },
            wfNo: {
              label: "流水参考号",
            },
            provinceName: {
              label: "省份",
            },
            cityName: {
              label: "城市",
            },
            blockName: {
              label: "区域",
            },
            wfFuncTypeName: {
              label: "违法类型",
            },
            imei: {
              label: "设备编号",
            },
            deviceHphm: {
              label: "执法车牌号",
            },
            shStatus: {
              label: "审核状态",
            },
            jgDataStatus: {
              label: "上传状态",
            }
          },
        },
        del: {
          row: null,// 存储当前点击行的数据
          methods: {
            setRow: function (row) {
              vm.del.row = row;
              $(".popover-confirm").hide()
            },
            ok: function () {


              vm.axios({
                url: 'illegal/delete.htm',
                data: {id: vm.del.row.id},
              }).then(function (rs) {
                let data = rs.data;
                if (data === "success") {
                  vm.searchData();
                  vm.$notify.success({content: '删除成功！'});
                }
              })
            },
          }
        },
      }
    },
    methods: {

      cancel: function () {

      },
      onSelectChange: function (items) {
        this.selectedItems = items;
      },


    },
    computed: {
      ...mapState({
        storeComputed(state) {
          return '';
        }
      })
    },
    mixins: [...vueUi.getInitMixins()]
  };
</script>
